<template>
  <div class="directory">
    <!-- aboutmain {{ id }} -------------{{ role }} -->
    <!-- :default-checked-keys="[defaultCheck]" -->
    <el-tree :data="tree" :props="defaultProps" node-key="_id" @node-click="handleNodeClick" />
  </div>
</template>


<script setup lang='ts'>

interface Tree {
  title: string
  children?: Tree[],
  [key: string]: any
}
const defaultProps = {
  children: 'children',
  title: 'title',
}



const tree = inject<any>('tree')


const emit = defineEmits(['clickNode'])
// const defaultCheck = ref('')


const handleNodeClick = (data: Tree) => {
  emit('clickNode', data)
}

</script>


<style scoped lang='scss'>
.directory {
  flex: 0.2;
  padding: 30px;
}
</style>